<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<nz-table
  #table
  class="no-border small full-height"
  [nzSize]="'small'"
  [nzLoading]="isLoading"
  [nzData]="listOfTask"
  [nzScroll]="{ x: '1480px', y: 'calc( 100% - 35px )' }"
  [nzFrontPagination]="false"
  [nzShowPagination]="false"
>
  <thead>
    <tr>
      <th nzWidth="80px" nzLeft="0px">ID</th>
      <th [nzSortFn]="sortReadBytesFn" nzWidth="140px">Bytes Received</th>
      <th [nzSortFn]="sortReadRecordsFn" nzWidth="150px">Records Received</th>
      <th [nzSortFn]="sortWriteBytesFn" nzWidth="120px">Bytes Sent</th>
      <th [nzSortFn]="sortWriteRecordsFn" nzWidth="120px">Records Sent</th>
      <th [nzSortFn]="sortAttemptFn" nzWidth="100px">Attempt</th>
      <th [nzSortFn]="sortHostFn" nzWidth="200px">Host</th>
      <th [nzSortFn]="sortStartTimeFn" nzWidth="150px">Start Time</th>
      <th [nzSortFn]="sortDurationFn" nzWidth="100px">Duration</th>
      <th [nzSortFn]="sortEndTimeFn" nzWidth="150px">End Time</th>
      <th [nzSortFn]="sortStatusFn" nzWidth="120px" nzRight="50px">Status</th>
      <th nzWidth="50px" nzRight="0px">More</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let task of table.data; trackBy: trackTaskBy">
      <td nzLeft="0">
        {{ task.subtask }}
      </td>
      <td>
        <span *ngIf="task.metrics['read-bytes-complete']; else loadingTemplate">
          {{ task.metrics['read-bytes'] | humanizeBytes }}
        </span>
      </td>
      <td>
        <span *ngIf="task.metrics['read-records-complete']; else loadingTemplate">
          {{ task.metrics['read-records'] | number: '1.0-0' }}
        </span>
      </td>
      <td>
        <span *ngIf="task.metrics['write-bytes-complete']; else loadingTemplate">
          {{ task.metrics['write-bytes'] | humanizeBytes }}
        </span>
      </td>
      <td>
        <span *ngIf="task.metrics['write-records-complete']; else loadingTemplate">
          {{ task.metrics['write-records'] | number: '1.0-0' }}
        </span>
      </td>
      <td>{{ task.attempt + 1 }}</td>
      <td>{{ task.host }}</td>
      <td>{{ task['start_time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
      <td>{{ task.duration | humanizeDuration }}</td>
      <td>{{ task['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
      <td nzRight="50px">
        <flink-job-badge [state]="task.status"></flink-job-badge>
      </td>
      <td nzRight="0px">
        <span
          *ngIf="!task['taskmanager-id'] || task['taskmanager-id'] === '(unassigned)'; else hrefTpl"
        >
          -
        </span>
        <ng-template #hrefTpl>
          <a nz-dropdown nzPlacement="bottomRight" [nzDropdownMenu]="menu">
            <i nz-icon nzType="ellipsis" nzTheme="outline"></i>
          </a>
          <nz-dropdown-menu #menu="nzDropdownMenu">
            <ul nz-menu>
              <li nz-menu-item>
                <a [routerLink]="['/task-manager', task['taskmanager-id'], 'logs']" target="_blank">
                  View taskmanager log
                </a>
              </li>
            </ul>
          </nz-dropdown-menu>
        </ng-template>
      </td>
    </tr>
  </tbody>
</nz-table>
<ng-template #loadingTemplate>
  <i nz-icon nzType="loading"></i>
</ng-template>
